<template>
  <view class="page-container">
    <!-- 消息列表 -->
    <scroll-view v-if="messageList.length>0" class="message-list" scroll-y>
      <view v-for="(item, index) in messageList" :key="item.id" class="message-item">
        <!-- 左侧头像 -->
        <view class="avatar-container">
          <image class="avatar" :src="item.avatar" mode="aspectFill" />
          <view v-if="item.unread" class="unread-badge"></view>
        </view>

        <!-- 消息内容 -->
        <view class="message-content">
          <view class="message-header">
            <text class="sender">{{ item.sender }}</text>
            <text class="time">{{ item.time }}</text>
          </view>
          <text class="message-text">{{ item.content }}</text>
        </view>
      </view>
    </scroll-view>
	 <!-- 空状态 -->
	    <view v-else class="empty-container">
	      <image class="empty-icon" src="/static/empty.png" mode="aspectFit" />
	      <text class="empty-text">暂无新消息</text>
	      <text class="empty-tip">所有通知都会在这里显示哦</text>
	    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'

const messageList = reactive([
  {
    id: 1,
    avatar: '/static/系统通知.png',
    sender: '系统通知',
    content: '恭喜注册成功，欢迎使用小程序！',
    time: '4/5 10:30',
    unread: true
  },
  {
    id: 2,
    avatar: '/static/消息.png',
    sender: '客服消息',
    content: '您的上报坑洞信息正在审核',
    time: '4/5 09:15',
    unread: false
  },
  // 更多消息数据...
])
</script>

<style lang="scss" scoped>
	.empty-container {
	  height: calc(100vh - 88rpx);
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 60rpx;
	
	  .empty-icon {
	    width: 320rpx;
	    height: 320rpx;
	    margin-bottom: 40rpx;
	    opacity: 0.8;
	  }
	
	  .empty-text {
	    font-size: 32rpx;
	    color: #666;
	    margin-bottom: 16rpx;
	  }
	
	  .empty-tip {
	    font-size: 26rpx;
	    color: #999;
	  }
	}
	
	/* 添加消息列表为空时的过渡动画 */
	.empty-container {
	  animation: fadeIn 0.6s ease;
	
	  @keyframes fadeIn {
	    from {
	      opacity: 0;
	      transform: translateY(20rpx);
	    }
	    to {
	      opacity: 1;
	      transform: translateY(0);
	    }
	  }
	}
.page-container {
  height: 100vh;
  background-color: #f8f8f8;
}


.message-list {
  height: calc(100vh - 88rpx);
  padding: 20rpx 24rpx;
}

.message-item {
  display: flex;
  padding: 24rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);

  .avatar-container {
    position: relative;
    margin-right: 24rpx;

    .avatar {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
      background-color: #eee;
    }

    .unread-badge {
      position: absolute;
      top: -8rpx;
      right: -8rpx;
      width: 24rpx;
      height: 24rpx;
      border-radius: 50%;
      background-color: #07c160;
      border: 2rpx solid #fff;
    }
  }

  .message-content {
    flex: 1;
    min-width: 0;

    .message-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12rpx;

      .sender {
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
      }

      .time {
        font-size: 24rpx;
        color: #999;
		margin-right: 15rpx;
      }
    }

    .message-text {
      font-size: 28rpx;
      color: #666;
      line-height: 1.4;
    
    }
  }
}
</style>